<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义指令</title>
</head>
<body>
    
    <div id="app">
        <label v-fontWeight="900" v-fontSize="'300px'">输入：</label><input v-focus v-color="'blue'"/>
        <p v-fontSize="'300px'">我爱学习</p>
    </div>
        <script src="./lib/vue.min.js"></script>
        <script>
            /* 
            和样式相关的，可以放在bind函数中
            和js操作相关的，应该放在inserted函数中
            */

            /* 全局自定义指令 */
            Vue.directive('color',{
                bind: function (el,binding) { // 每当指令绑定到元素上的时候，就会执行bind函数，只执行一次
                    // el.style.color = 'red'
                    // binding.value
                    el.style.color = binding.value

                },
            })
            Vue.directive('focus', {
                bind: function (el) { // 每当指令绑定到元素上的时候，就会执行bind函数，只执行一次

                },
                inserted: function (el) { // 元素插入到dom的时候，就会执行inserted函数，只执行一次
                    el.focus()
                },
                updated: function () { // 每当vDode更新的时候，会执行update函数，可能会执行多次

                }
            })
            let vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {

                },
                directives: { // 自定义私有指令
                    'fontWeight': {
                        bind: function (el,binding) {
                            el.style.fontWeight = binding.value
                        }
                    },
                    'fontSize': function (el,binding) { // 这是简写，等同于把bind和update中
                        el.style.fontSize = parseInt(binding.value) + 'px'　             
                    }
                }
            })
        </script>
</body>
</html>